<template>
  <h2>员工信息姓名：{{ preson.name }}</h2>
  <h2>员工信息姓名：{{ name }}</h2>
  <h2>员工信息：{{ salary }}</h2>
  <button @click="add">修改信息</button>
  <h2>当前 num 的值为：{{ num }}</h2>
  <button @click="num++">新增num的值</button>
</template>

<script setup>
import { ref, reactive, toRef, toRefs, shallowRef, readonly, shallowReadonly, toRow } from 'vue'
let preson = reactive({
  name: '张三',
  age: 19,
  job: {
    j1: {
      salary: 20
    }
  }
})
// let name = toRef(preson, 'name')
// console.log(name)
// let salary = toRef(preson.job.j1, 'salary')
// // preson.job.j1.salary --
const x = toRefs(preson)
// console.log(x)

let num = shallowRef(0)
let str = ref('张三')
console.log(str)
let toRowStr = toRow(str)
console.log(toRowStr)
// readonly 将数据设置成只读 深只读
// shallowReadonly 浅只读
// num = readonly(num)
function add () {
  preson.job.j1.salary --
  // salary++
  // console.log(salary)
}
</script>

<style>

</style>